<template>
  <div ref="itemRef" class="item">
    <div class="frame">
      <div ref="front" class="box front" :style="{backgroundImage: `url(${img})`}">
        <h1>{{title}}</h1>
        <span style="   display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 10em;">{{content}}</span>
      </div>
      <div ref="left" class="box left" :style="{backgroundImage: `url(${img})`}"></div>
      <div ref="right" class="box right" :style="{backgroundImage: `url(${img})`}"> </div>
    </div>

   

  </div>
</template>
<script setup lang='ts'>
  import { ref, onMounted } from 'vue'


  const itemRef = ref();
  const front = ref()
  const left = ref()
  const right = ref()



  const props = defineProps({
    title: {
      type: String
    },
    content: {
      type: String
    },
    img: {
      type: String
    }
  })

  onMounted(() => {
    // var items = document.getElementsByClassName('item');
    // var item = items[8];
    //   var frame = item.getElementsByClassName('frame')[0];
    //   var frontBox = frame.getElementsByClassName('front')[0];

    //   console.log(item);

    // frontBox.style.backgroundImage = 'url(https://img1.baidu.com/it/u=3302184040,3713353210&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500)';


    const frontBox = front.value;
    const leftBox = left.value;
    const rightBox = right.value;



    console.log(frontBox);


  })

  const getBackgroundImage = () => {



    // 获取所有的item元素
    var items = document.getElementsByClassName('item');
    // 循环遍历每个item
    for (var i = 0; i < items.length; i++) {
      // 获取当前item
      var item = items[i];
      var frame = item.getElementsByClassName('frame')[0];
      var frontBox = frame.getElementsByClassName('front')[0];
      var leftBox = frame.getElementsByClassName('left')[0];
      var rightBox = frame.getElementsByClassName('right')[0];
      // 设置背景图片
      // frontBox.style.backgroundImage = 'url(src/pages/navbar/myArticle/img/' + (i + 1).toString().padStart(2, '0') + '.jpg)';
      // leftBox.style.backgroundImage = 'url(src/pages/navbar/myArticle/img/' + (i + 1).toString().padStart(2, '0') + '.jpg)';
      // rightBox.style.backgroundImage = 'url(src/pages/navbar/myArticle/img/' + (i + 1).toString().padStart(2, '0') + '.jpg)';
      document.body.style.transition = 'background-image 0.7s ease-in-out';
    }
  }
</script>
<style scoped>
  /* 设置.item元素为相对定位，左浮动，左右外边距为20px */
  .item {
    position: relative;
    float: left;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* transform-style: preserve-3d;
    perspective: 2000px;
    
    */
    transform: 2s;
  }



  /* .item:hover {

    transform: scale(1.2);

} */

  /* .item::before {
    content: "";
    position: absolute;
    left: 0;
    top: -5px;
    width: 100%;
    height: 5px;
    background-color: white;

    transform-origin: bottom;

    transform: skew(-45deg);
  }

  .item::after {
    content: "";
    position: absolute;
    top: 0;
    right: -5px;
    width: 5px;
    height: 100%;
    background-color: white;
    transform-origin: left;
    transform: skewY(-45deg);
  } */

  /* .item .frame{
    width: 100%;
    height: 100%;
    background-color: white;
    transform-origin: left;
    transform: 1s;
  }
  

.item:hover .frame{
  transform: rotateY(-135deg);
} */

  .item .content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }


  /* 设置.frame元素为相对定位，宽度和高度为100%，过渡动画时间为1秒，3D变换模式为保留3D效果 */
  .frame {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out;
    transform-style: preserve-3d;
  }

  /* 设置.frame元素的伪元素为绝对定位，底部偏移量为-16%，宽度为100%，高度为60px，背景颜色为#ffffff1c，盒阴影为0px 0px 15px 5px
    #ffffff1c，3D变换为绕X轴旋转90度并向上平移20px */
  .frame::after {
    content: "";
    position: absolute;
    bottom: -16%;
    width: 100%;
    height: 60px;
    background: #ffffff1c;
    box-shadow: 0px 0px 15px 5px #ffffff1c;
    transform: rotateX(90deg) translate3d(0px, -20px, 0px);
  }

  /* 设置.box元素为flex布局，纵向排列，水平和垂直居中对齐，绝对定位，宽度和高度为100%，边框为4px实心白色，透视效果为1000px，3D变换模式为保留3D效果 */
  .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid #fff;
    perspective: 1000px;
    transform-style: preserve-3d;
  }

  /* 设置.box元素中的h1和span元素颜色为#fff，Z轴平移距离为20px */
  .box h1,
  .box span {
    color: #fff;
    transform: translateZ(20px);
  }

  /* 设置.box元素中的h1元素文字阴影为0 0 30px #1f05b4，字体大小为100px */
  .box h1 {
    text-shadow: 0 0 30px #1f05b4;
    font-size: 40px;
  }

  /* 设置.box元素中的span元素为绝对定位，底部偏移量为20px，左右内边距为25px，文字阴影为0 0 10px #1f05b4 */
  .box span {
    position: absolute;
    bottom: 20px;
    padding: 0 25px;
    text-shadow: 0 0 10px #1f05b4;
  }

  /* 设置.front、.left和.right元素的盒阴影为0 0 50px #ffffff，背景图大小为cover */
  .front,
  .left,
  .right {
    box-shadow: 0 0 50px #ffffff;
    background-size: cover;
  }

  /* 设置.left和.right元素的顶部偏移量为0，宽度为60px，背面不可见 */
  .right,
  .left {
    top: 0;
    width: 60px;
    backface-visibility: hidden;
  }

  /* 设置.left元素的左侧偏移量为0，左边框宽度为5px，3D变换为向右平移1px，Z轴平移-60px，绕Y轴逆时针旋转90度，变换原点为左侧 */
  .left {
    left: 0;
    border-left-width: 5px;
    transform: translate3d(1px, 0, -60px) rotateY(-90deg);
    transform-origin: 0%;
  }

  /* 设置.right元素的右侧偏移量为0，右边框宽度为5px，3D变换为向左平移1px，Z轴平移-60px，绕Y轴顺时针旋转90度，变换原点为右侧 */
  .right {
    right: 0;
    border-right-width: 5px;
    transform: translate3d(-1px, 0, -60px) rotateY(90deg);
    transform-origin: 100%;
    color: rgb(rgba(47, 0, 255, 0.558), 38), green, blue);
  }


</style>